<template>
  <div id="order">
    <div class="order-container" v-if="totalPages > 0">
      <div class="item" v-for="(item, index) in visibleData" :key="index">
        <div>
          <img :src="item.img" alt="" width="170" height="110" />
        </div>
        <div class="desc">
          <div>下单时间：{{ format(item.timestamp) }}</div>
          <div><h3>{{item.travel}}</h3> {{ item.title }}</div>
          <div class="price">
            现价：<span
              ><strong>￥{{ item.price }}</strong></span
            >
          </div>
        </div>
        <div class="gosell"></div>
      </div>
    </div>

    <div v-else><h1>空空如也...赶快去下单吧</h1></div>

    <el-pagination
      v-if="totalPages > 0"
      :page-sizes="[5, 10, 15, 20]"
      background
      :default-page-size="5"
      layout="sizes, prev, pager, next"
      :total="totalItems"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted, computed, watchEffect } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const data = reactive([]);

watchEffect(() => {
  data.value = JSON.parse(localStorage.getItem("orderList")) || [];
});

const pageSize = ref(5);
const currentPage = ref(1);

const handlePageChange = (val) => {
  currentPage.value = val;
};

const totalPages = ref(0);

const totalItems = computed(() => {
  return data.value.length;
});

watchEffect(() => {
  totalPages.value = Math.ceil(totalItems.value / pageSize.value);
});

const visibleData = ref([]);

onMounted(() => {
  updateVisibleData();
});

const updateVisibleData = () => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  visibleData.value = data.value.slice(start, end);
};

watchEffect(() => {
  updateVisibleData();
});

const handleSizeChange = (val) => {
  pageSize.value = val;
};

const format = (rawDate) => {
  const date = new Date(rawDate);

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const second = String(date.getSeconds()).padStart(2, "0");

  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return formattedDate;
};
</script>

<style lang="scss" scoped>
#order {
  padding: 20px;
  .order-container {
    min-height: 500px;
    max-height: 500px;
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: gray;
    }

    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-track {
      background-color: #eee;
    }
    .item {
      display: flex;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 #d7d7d7;
      align-items: center;
      padding: 20px;
      margin: 10px;
      img {
        border-radius: 10px;
        margin-right: 30px;
      }
      .desc {
        width: 400px;
        div {
          margin: 10px 0;
        }
      }
      .price {
        span {
          color: red;
        }
      }
      .gosell {
        text-align: center;
        flex: 1;
      }
    }
  }

  .el-pagination {
    margin-top: 20px;
    text-align: right;
  }
  ::v-deep .is-active {
    background-color: #434b52;
  }
}
</style>
